import * as React from 'react';
import {observer} from 'mobx-react';
import {Modal, Row, Col, Form, Select, DatePicker} from 'antd';
import {SelectItem} from '../../../../component/select/Select';
import {AreaTree} from '../../../../component/areaTree/AreaTree';
import {SortableGrid} from '../../../../component/sortableGrid/SortableGrid';

import {SudokuBaseFormStore, areaTreeStore} from '../SudokuStore';

@observer
export class SudokuBaseFormModal extends React.Component<{ store: SudokuBaseFormStore, title: string, onOk }, any> {

    render() {
        return (
            <Modal
                maskClosable={false}
                title={this.props.title}
                onOk={this.ok(this)}
                onCancel={() => {
                    this.props.store.hide()
                }}
                width="900"
                visible={this.props.store.visible}
                confirmLoading={this.props.store.confirmLoading}>
                <SudokuBaseForm store={this.props.store}/>
            </Modal>
        )
    }

    ok(me) {
        return function () {
            me.props.onOk(me);
        }
    }

    cancel(me) {
        return function () {
            me.props.onCancel(me);
        }
    }
}

@observer
class SudokuBaseForm extends React.Component<{ store: SudokuBaseFormStore }, any> {
    onChangeAdTreeSelect = (value, info) => {
        let store: SudokuBaseFormStore = this.props.store;
        store.valid('areaIds', value, !store.fields.areaIds.required);

        store.fields.filterAreaIds.value = info.checkedNodes ? info.checkedNodes : [];
    }

    onChangeSudokuOptions = (value) => {
        let store: SudokuBaseFormStore = this.props.store;
        store.changeSudokuOptions(value);
    }

    onChangePlatForm = (value) => {
        let store: SudokuBaseFormStore = this.props.store;
        store.valid('platformType', value, !store.fields.platformType.required);
        store.selectPlatForm();
    }

    onChangeCategory = (value) => {
        let store: SudokuBaseFormStore = this.props.store;
        store.valid('category', value, !store.fields.category.required);
        store.selectCategory();
    }

    changeSelectSudokuOption = (items) => {
        let store: SudokuBaseFormStore = this.props.store;

        store.changeSelectSudokuOption(items);
    }

    render() {
        const store: SudokuBaseFormStore = this.props.store;

        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 18}
        }

        return (
            <div style={{width: 850}}>
                <Row type="flex">
                    <Col span={12}>
                        <SelectItem mykey="platformType"
                                    title="平台"
                                    optionKey='type'
                                    optionValue='title'
                                    store={store}
                                    onChange={this.onChangePlatForm}
                                    labelCol={formItemLayout.labelCol}
                                    wrapperCol={formItemLayout.wrapperCol}/>
                    </Col>
                    <Col span={12}>
                        <SelectItem mykey="category"
                                    title="类型"
                                    optionKey='type'
                                    optionValue='name'
                                    store={store}
                                    onChange={this.onChangeCategory}
                                    labelCol={formItemLayout.labelCol}
                                    wrapperCol={formItemLayout.wrapperCol}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <AreaTree label="区域:"
                                  filedName="areaIds"
                                  labelCol={{span: 3}}
                                  wrapperCol={{span: 21}}
                                  store={store}
                                  treeData={areaTreeStore.treeData}
                                  onChange={this.onChangeAdTreeSelect}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={14}>
                        <SelectItem mykey="sudokuOption"
                                    title="icon"
                                    optionKey='text'
                                    optionValue='text'
                                    multiple={true}
                                    labelCol={{span: 5}}
                                    wrapperCol={{span: 19}}
                                    store={store}
                                    onChange={this.onChangeSudokuOptions}/>
                        <Col span={19} offset={5}>
                            <div className="sudoku_tooltip">提示: 拖曳右侧图标可以进行排序。</div>
                        </Col>
                    </Col>
                    <Col span={9} offset={1}>
                        <SortableGrid data={store.fields.selectSudokuOption.value}
                                      changeItem={this.changeSelectSudokuOption}/>
                    </Col>
                </Row>
            </div>
        )
    }
}